<!-- 适用于标题区的关联文档 -->
<script>
    //引入回显关联文档对象操作
    import {createAttachment, replaceArea} from '@/helper/relation-doc';
    import globalData from '@/plugins/data';
    import globalMethods from '@/plugins/methods';

    export default {
        name: 'RelationDoc',
        props: {
            //关联文档区域。用于弹窗回显。默认'doc1'，
            //因为以前的代码，基础信息那里的关联文档就是这个名称
            area: {
                type: String,
                default: 'doc1',
            },
            secretLevelAble: {
                type: Boolean,
                default: false,
            },
            // 已上传的文档列表
            fileList: {
                type: Array,
                default: () => ([]),
            },
        },
        data() {
            return {
                flag: false,
            };
        },
        methods: {
            /**
             * @description: 关联文档弹窗
             */
            handleOpenDialog() {
                // 先生成iframe的src
                const url = `/seeyon/ctp/common/associateddoc/assdocFrame.do?isBind=1,3&referenceId=${globalData.summaryId}&applicationCategory=1&Zxchat=1&poi=${this.area}&isNewStyle=true&showRelateDocSecret=${this.secretLevelAble}`;
                const area = this.area;
                const dialog = globalMethods.dialog({
                    title: $.i18n('common.toolbar.insert.mydocument.label'),
                    width: 1000,
                    height:  window.top.innerHeight * 0.8,
                    centered: true,
                    bodyStyle: 'padding: 0',
                    dialogStyle: { 'padding-bottom': 0 },
                    url,
                    transParams: {
                        parentWin: window,
                    },
                    afterClose: () => {
                        this.flag = false;
                    },
                    onCancel: () => {
                        dialog.close();
                    },
                    onConfirm: () => {
                        if (this.flag) return;
                        this.flag = true;

                        // 获取iframe上下文
                        const ctx = dialog.dialog().contentWindow;

                        // 获取选择的附件列表
                        let docList = ctx.fileUploadAttachments.values().toArray();

                        // 如果没选择文件就弹窗提示
                        if (!docList.length) {
                            this.flag = false;
                            return this.$message.error($.i18n('assdoc.choose.atleastone.mesg'));
                        }
                        //替换成新附件对象
                        docList = createAttachment(docList, this.area)
                        docList.forEach(element => {
                            element.showArea = area;
                            element.subReference = "";
                        });
                        // 通知设置列表数据
                        this.$emit('selected', docList);
                        
                        // 保存本window的fileUploadAttachments上
                        // 再次打开弹窗回显的时候要填充进去
                        replaceArea(this.area, docList);

                        dialog.close();
                    },
                });
            },
        },
        render() {
            return (
                <div class="relation-doc-container" onClick={this.handleOpenDialog}>
                    <span class="relation-doc">{this.$i18n('common.toolbar.insert.mydocument.label')}</span>
                    <span>({ this.fileList.length })</span>
                </div>
            );
        },
    };
</script>

<style lang="scss" scoped>
    .relation-doc-container {
        display: flex;
        align-items: center;
        color: $c9;
        
        &:hover {
            cursor: pointer;
        }

        > .relation-doc {
            color: #1890ff;
            color: var(--theme-brand6,#1890ff);

            &:hover {
                color: #40a9ff;
                color: var(--theme-brand4, #40a9ff);
            }
        }
    }
</style>
